<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title><spring:message code="head.clothGarment"></spring:message>-<spring:message code="head.fabricCatalogue"></spring:message></title>
    <!--公共样式-->
    <link href="${pageContext.request.contextPath }/web/css/font/iconfont.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/web/css/NormalizeFile.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/web/css/public.css" />
    <!--列表页面私有样式-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/web/css/subpage/list.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/h-ui/layui-v1.0.2/layui/css/layui.css" />
    
</head>
<body>
<div class="pagetitle"><spring:message code="fabric"></spring:message></div>
<jsp:include page="../main/head.jsp"></jsp:include>
<!--列表 begin-->
<div class="contenter mt134">
    <!--筛选条件 begin-->
    <div class="screening-condition">
        <c:forEach items="${ffList }" var="f">
        <c:if test="${f.ffParentId==0 }">
    		<div class="screening-condition-list">
	            <div class="screening-condition-list-title">${f.ffName }：</div>
	            <ul class="screening-condition-list-cont">
	                <li name="bx" onclick="checkThis(0,this);" id="bx${f.ffId }"><spring:message code="fabric.unlimit"></spring:message></li>
	                <c:forEach items="${ffList }" var="ffOne">
	                	<c:if test="${ffOne.ffParentId==f.ffId }">
	                		<li id="li${ffOne.ffId }" onclick="checkThis(${ffOne.ffId },this);"><a href="javascript:void(0);" id="${ffOne.ffId }">${ffOne.ffName }</a></li>
	                	</c:if>
	                </c:forEach>
	            </ul>
	            <div class="clearfix"></div>
	        </div>
        </c:if>
    	</c:forEach>
    </div>
    <!--筛选条件 end-->
    <!--状态 begin-->
    <div class="condition">
        <ul class="condition-left">
            <li class="condition-left-title" id="zt0" onclick="checkThis(0,this);"><spring:message code="fabric.state"></spring:message>:</li>
            <li <c:if test="${sId==1 }">class="on"</c:if> id="zt1" onclick="checkThis(1,this);"><spring:message code="fabric.spotArea"></spring:message></li>
            <li <c:if test="${sId==2 }">class="on"</c:if> id="zt2" onclick="checkThis(2,this);"><spring:message code="fabric.orderArea"></spring:message></li>
            <li <c:if test="${sId==3 }">class="on"</c:if> id="zt3" onclick="checkThis(3,this);"><spring:message code="fabric.latestFabrics"></spring:message></li>
            <li <c:if test="${sId==4 }">class="on"</c:if> id="zt4" onclick="checkThis(4,this);"><spring:message code="fabric.mostCloselyWatched"></spring:message></li>
            <li <c:if test="${sId==5 || sId==6 }">class="on"</c:if> id="zt5" onclick="checkThis(5,this);"><spring:message code="fabric.price"></spring:message><c:if test="${sId!=6 }"><img src="${pageContext.request.contextPath }/web/img/sort.png" /></c:if><c:if test="${sId==6 }"><img src="${pageContext.request.contextPath }/web/img/sort1.png" /></c:if></li>
        	<li <c:if test="${sId==7 }">class="on"</c:if> id="zt6" onclick="checkThis(7,this);"><spring:message code="fabric.yinhua"></spring:message></li>
        </ul>
        <div class="flower-paging">
	        <button class="page-turning" <c:if test="${page.page==1 }">disabled</c:if> onclick="gotoPage(${page.page-1 });"><</button>
	        <c:if test="${page.page>=page.totalPage }">${page.totalPage }</c:if>
	        <c:if test="${page.page<page.totalPage }">${page.page }</c:if>
	        <button class="page-turning" <c:if test="${page.page>=page.totalPage || page.totalPage==0||page.totalPage==1 }">disabled</c:if> onclick="gotoPage(${page.page+1 });">></button>
	        <spring:message code="fabricCatalogue.total"></spring:message>
	        <span class="page-total">${page.totalPage }</span><spring:message code="fabricCatalogue.page"></spring:message>
        </div>
        <div class="clearfix"></div>
    </div>
    <!--状态 end-->
    <!--列表 begin-->
    <c:if test="${not empty list }">
    <ul class="fabric-exploit-list">
    	<c:forEach items="${list }" var="l">
        <li>
        	<a href="${pageContext.request.contextPath }/web/fabric/detail?fId=${l.fId}" onfocus="blur();">
        		<div class="list-bor">
        			<img src="${pageContext.request.contextPath }/upload/${l.image }" />
       			</div>
       			<div class="screening-condition-name">
       				<div class="list-gm">${l.fNo }</div>
       				<div class="list-cf">${l.material }</div>
       				<div class="list-price"><span>${l.price }</span><spring:message code="fabricCatalogue.price"></spring:message></div>
   				</div>
			</a>
			<div class="list-exploit-like" onclick="attention(1,${l.fId});">
				<c:if test="${not empty member }">
					<c:if test="${member.mId==l.mId }">
						<img id="attImg${l.fId}" src="${pageContext.request.contextPath }/web/img/icon_alreadycollected.png" />
					</c:if>
					<c:if test="${member.mId!=l.mId }">
						<img id="attImg${l.fId}" src="${pageContext.request.contextPath }/web/img/icon_addcollection.png" />
					</c:if>
				</c:if>	
				<c:if test="${empty member }">
					<img id="attImg${l.fId}" src="${pageContext.request.contextPath }/web/img/icon_addcollection.png" />
				</c:if>
			</div>
		</li>
		</c:forEach>
    </ul>
    </c:if>
    <c:if test="${page.totalPage>1 }">
    	<div id="demo3"></div>
    	<div class="clearfix"></div>
    </c:if>
    <!--图文列表 end-->
    
	 <input type="hidden" id="currentPage" name="page" value="${page.page}"/>
	 <input type="hidden" id="tottalPage" value="${page.totalPage}"/>
	 <input type="hidden" id="id" name="id" value="${theme.id }"/>
	 <input id="query" type="hidden" value="${query }">
	 <input id="sId" type="hidden" value="${sId }">
	 <input id="type" type="hidden" value="${type }">
    <!--列表 end-->
</div>
<!--列表 end-->
<jsp:include page="../main/bottom.jsp"></jsp:include>
<!--ie789下placeholder不兼容-->
<script type="text/javascript" src="${pageContext.request.contextPath }/web/js/placeholder.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/layui-v1.0.2/layui/layui.js"></script>
<script>
    //关注
    function attention(type,aId){
    	$.ajax( {  
    		type : "POST",  
             url : "${pageContext.request.contextPath }/member/member/attention",
             data : {type:type,aId:aId},
             success: function(data) {
            	 if(data == 1){//取消关注成功
            		 layer.msg('<spring:message code="caozuochenggong"></spring:message>',{icon:1,time:1000});
            		 $("#attImg"+aId).attr('src','${pageContext.request.contextPath }/web/img/icon_addcollection.png');  
            	 }else if(data == 2){//关注成功
            		 layer.msg('<spring:message code="caozuochenggong"></spring:message>',{icon:1,time:1000});
            		 $("#attImg"+aId).attr('src','${pageContext.request.contextPath }/web/img/icon_alreadycollected.png');
            	 }else{
            		 layer.msg('<spring:message code="caozuoshibai"></spring:message>',{icon:0,time:1000});
            	 }
             }
    	});
    }
    $(document).ready(function () {
    	var q=$("#query").val();
    	addTerm(q);
    });
    //添加条件样式
    function addTerm(q){
    	var str= new Array();   
    	str=q.split("-");
    	if("all"==str[0]){
    		$("li[name='bx']").attr("class","on");
    		return;
    	}
   	    for (var i=0;i<str.length;i++ )   
   	    {   var li="#li";
   	    	li=li+str[i];
   	    	$(li).attr("class","on");
   	    }
   	 	$("li[name='bx']").each(function(){
   	 		var hasClass=0;//标记
   	 		$(this).nextAll().each(function(){
   	    		if($(this).hasClass("on")){
   	    			hasClass=1;
   	    		}
   	 		});
   	 		if(hasClass==0){
	    		$(this).attr("class","on");
	    	}
   	 	});
    }
    //点击选择筛选条件
    function checkThis(cId,obj){
    	var v_id = $(obj).attr('id');//获取当前元素的id
    	var str=v_id.substring(0,2);//截取前两个字符
    	var query="";//定义查询条件
    	var sId=$("#sId").val();//状态
    	var type=$("#type").val();//类别
    	if("li"==str){
    		$(obj).siblings().removeClass("on");
    		$(obj).attr("class", "on");
    	}
    	if("bx"==str){
    		$(obj).siblings().removeClass("on");
    		$(obj).attr("class", "on");
    	}
    	if("zt"==str){
    		if(sId==5&&cId==5){
    			sId=6;
    		}else if(sId==6&&cId==5){
    			sId=5;
    		}else{
    			sId=cId;
    		}
    	}
    	//遍历所有的class="on" 的查询条件
    	$('.screening-condition ul li').each(function(){
    		if($(this).hasClass("on")){
    			var liId=$(this).attr('id');
    			var liStr=liId.substring(0,2);
    			var id=liId.substr(2, liId.length-2);
    			if(query!="" && "li"==liStr){
    				query=query+"-"+id;
    			}
    			if(query=="" && "li"==liStr){
    				query+=id;
    			}
    		}
    	});
    	if(query==""){
    		query="all";
    	}
    	$("#query").val(query);
    	$("#sId").val(sId);
    	if(sId!=null&&sId!=""){
    		window.location.href="${pageContext.request.contextPath }/web/fabric/"+type+"/"+query+"?sId="+sId;
    	}else{
    		window.location.href="${pageContext.request.contextPath }/web/fabric/"+type+"/"+query;
    	}
    }
    //分页方法
    function gotoPage(pagenum){
  		var query=$("#query").val();
		var sId=$("#sId").val();
		var type=$("#type").val();
		if(sId!=null&&sId!=""){
    		window.location.href="${pageContext.request.contextPath }/web/fabric/"+type+"/"+query+"?sId="+sId+"&page="+pagenum;
    	}else{
    		window.location.href="${pageContext.request.contextPath }/web/fabric/"+type+"/"+query+"?page="+pagenum;
    	}
  	}
    
  //分页初始化
    layui.use(['laypage', 'layer'], function(){
    	  var laypage = layui.laypage
    	  ,layer = layui.layer;
    	  laypage({
    	    cont: 'demo3'
    	    ,pages: $("#tottalPage").val()
    	    ,first: 1
    	    ,groups:5
    	    ,curr:$("#currentPage").val()
    	    ,skin: 'molv' //皮肤
    	    ,last: $("#tottalPage").val()
    	    ,prev: '<em><</em>'
    	    ,next: '<em>></em>'
    	    ,jump: function(obj, first){
    	        var curr = obj.curr;
    	        if(!first){ //一定要加此判断，否则初始时会无限刷新    
    	        	gotoPage(curr);    
                }
    	      }
    	  });
    	  
    	});
    
</script>
</body>
</html>